<template>
	<div class="articleDetail">
		<headercontent v-bind:headerTitle = "headerTitle"></headercontent>
		<div class="content">
			<h2 class="title">{{title}}</h2>
			<p class="notes">{{time}}小时前-{{author}}</p>
			<div>{{content}}</div>
		</div>
	</div>
</template>

<script>
	import headercontent from './header'
	import data from '../util/mock'
	import axios from 'axios'
	export default {
  		name: 'articleDetail',
  		components:{headercontent},
  		data() {
			return {
				headerTitle: "",
				title:"",
				time:"",
				author:"",
				content:""
			}
		},
  		mounted() {
			this.init();
			console.log(this.$route.params.id);
		},
		methods: {
			init(){
				var _this = this;
				axios.get('/test/mockData', {
				  params: {name: "articleDetail",id:_this.$route.params.id}
				}).then(function(res) {
					console.log(res.data);
					_this.title = res.data.article.title;
					_this.time = res.data.article.time;
					_this.author = res.data.article.author;
					_this.content = res.data.article.content;
					
				}).catch(function(error) {
					console.log(error);
				});
			}
		}
	}
</script>

<style>
	.articleDetail{background:#fff;}
	.articleDetail .content {border-top: 1px solid #ddd; color: #666; padding: 15px; font-size: 1.2em; line-height: 20px;}
	.articleDetail .title {font-size: 1.4em; line-height: 25px; margin-bottom: 10px;}
	.articleDetail .notes {color: #999; margin-bottom: 10px; font-size: 0.9em;}
</style>